<template>
	<view style="padding-top: 20px;">
		<div class="user">
			<img src="../../static/user.jpg" class="user-avatar" />
		</div>
		<form>
			<view class="uni-form-item uni-column">
				<view class="title">用户名：{{ userData.userName }}</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">身份证：{{ userData.id }}</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">联系电话：{{ userData.phone }}</view>
			</view>
		</form>
		<view class="coupons">
			<button type="default" class="coubtn" @click="goCouInfo()">我的优惠券</button>
		</view>
		<view class="out">
			<button type="default" class="outbtn" @click="goOut()">退出账号</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData: {
					userName: "qqqqqq",
					id: "111111",
					phone: "123456"
				}
			}
		},
		methods: {
			goCouInfo() {
				uni.navigateTo({
					url: './coupons'
				})
			},
			goOut() {
				uni.redirectTo({
					url: '../index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scope>
	.user {
		width: 100px;
		height: 100px;
		margin-left: 50%;
		transform: translateX(-50%);
		margin-bottom: 10px;

		.user-avatar {
			width: 100px;
			height: 100px;
			border-radius: 15px;
			box-shadow: 1px 1px 8px 0px;
		}

	}

	.uni-form-item {
		font-weight: 700;
		padding-bottom: 20rpx;
		text-align: center;

		.title {
			font-size: 18px;
		}
	}

	.coupons {

		.coubtn {
			width: 50%;
			background-color: #DD524D;
			color: #FFFFFF;
		}
	}

	.out {
		margin-top: 20px;

		.outbtn {
			width: 40%;
			background-color: #555555;
			color: #FFFFFF;
		}
	}
</style>
